<template lang="html">
  <section>
		<div class="hei_from" :style="{height :heiFrom}">
			<el-form :inline='true'   ref="item_ref" class="forms"
				v-for = '(item ,index) in formdata'  :key="index"
				label-position='right' :class = "{'hei_ato':stringHeiAto(index)}" label-width="160px">
				<div class="item_title">{{item.title}}&nbsp;</div>
				<div class="margain-form">
					<el-form-item   class='forms_item' v-for = '(inputitem,index) in item.input_set'
						:key="index" :label="inputitem.label" >
						<!-- input -->
						<el-input
							v-if='inputitem.type === "input"'
							v-model='inputitem.modelData'
							type = 'input'
							placeholder='请输入'
							style='width : 180px'
							clearable
							size='mini'>
						</el-input>
						<!-- select -->
						<el-select
							size='mini'
							v-else-if='inputitem.type === "select"'
							v-model='inputitem.modelData'
							style='width : 180px'
							clearable>
							<el-option
								v-for='elem in inputitem.options'
								:value='elem.code'
								:key='elem.code'
								:label='elem.labelselect'>
							</el-option>
						</el-select>
						<!-- 日期 -->
						<el-date-picker
							v-else-if='inputitem.type ==="date"'
							v-model="inputitem.modelData"
							value-format='yyyy-MM-dd'
							align="right"
							type="date"
							size='mini'
							style='width:180px;'
							placeholder="选择日期">
						</el-date-picker>
						<!-- 日期范围 start -->
            <el-date-picker
              v-if="inputitem.type === 'daterange'"
              v-model="inputitem.modelData[0]"
              align="right"
              type="date"
              size='mini'
              style='width:180px;'
              placeholder="开始日期"
              value-format='yyyy-MM-dd'
              :picker-options='pickerBegin[inputitem.code].before'>
            </el-date-picker>
            <el-form-item v-if="inputitem.type === 'daterange'" label="至" label-width="40px">
              <el-date-picker
                v-model="inputitem.modelData[1]"
                align="right"
                type="date"
                size='mini'
                style='width:180px;'
                placeholder="结束日期"
                value-format='yyyy-MM-dd'
                :picker-options='pickerBegin[inputitem.code].after'>
              </el-date-picker>
            </el-form-item>
            <!-- 日期范围 end -->
            <!-- 年龄范围  start -->
            <el-select
							v-if='inputitem.code === "nl"' 
              v-model="inputitem.modelData[0]" 
							size='mini'
							style='width : 100px'
              @change='changeAge1'
              placeholder="最小年龄"
							clearable>
							<el-option
								v-for='i in ageRange1'
								:value='i'
								:key='i'
								:label='i'>
							</el-option>
						</el-select>
            <el-form-item v-if="inputitem.code === 'nl'" label="至" label-width="40px">
              <el-select
                v-model="inputitem.modelData[1]" 
                size='mini'
                style='width : 100px'
                @change='changeAge2'
                placeholder="最大年龄"
                clearable>
                <el-option
                  v-for='i in ageRange2'
                  :value='i'
                  :key='i'
                  :label='i'>
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 年龄范围  end -->
					</el-form-item>
				</div>
				<span class="more" @click="setSmFromHeight(index)" v-html="textSmFromBool(index)?SmFromBoolBoolText:SmFromBoolTrueText"></span>
			</el-form>
		</div>
		<div class="s-more" >
			<span class="sm-wrap" @click="changeFromHeight">
				{{heiFromBool?FromBoolTrueText:FromBoolFalseText}}<i></i>
			</span>
		</div>
		<div class="button">
			<button type="button" class="el-button el-button--primary el-button--small">
				<span>立案号提取</span>
			</button>
			<button type="button" class="el-button el-button--primary el-button--small" @click="search">
				<span>搜索</span>
			</button>
			<button type="button" class="el-button el-button--danger el-button--small" @click="clear">
				<span>清空</span>
			</button>
		</div>
  </section>
</template>

<script>
export default {
  props: {
    formData: Array
  },
  data() {
    return {
      formdata: this.formData,
      heiAto: true,
      heiFrom: 0 /*from的自动高度*/,
      heiFromOld: 0 /*储存高度*/,
      heiFromBool: false /*展开状态，true为展开，false关闭*/,
      FromBoolTrueText: "收起选项",
      FromBoolFalseText: "展开选项（ 人员信息、案件状态、发案时间 等）",
      SmFromBoolTrueText: "展开<i class='el-icon-arrow-down'></i>",
      SmFromBoolBoolText: "收起<i class='el-icon-arrow-up'></i>  ",
      heiSmFromBool: [] /*false是收起的状态*/,
      fontSize: 14,
      ageRange1: [],
      ageRange2: [],
      pickerBegin: {},
    };
  },
  created() {
    for(let i = 1;i <= 110 ;i++){
      this.ageRange1.push(i);
      this.ageRange2.push(i);
    }
    this.formdata.forEach((elem) => {
      elem.input_set.forEach((item) => {
        // console.log(item);
        if(item.type === 'daterange'){
          this.pickerBegin[item.code] = {
            before:{
              disabledDate: (time) => {
                let beginDateVal = new Date(item.modelData[1]).getTime();
                if (beginDateVal) {
                  return time.getTime() > beginDateVal;
                }
              }
            },
            after:{
              disabledDate: (time) => {
                let beginDateVal = new Date(item.modelData[0]).getTime();
                if (beginDateVal) {
                  return time.getTime() < beginDateVal;
                }
              }
            }
          }
        }
      });
    });
  },
  mounted() {
    this.setFromHeight();
    this.setHeiSmFromBool();
  },
  methods: {
    changeFromHeight() {
      /*关闭打开选项*/
      this.heiFrom = this.heiFromBool ? this.heiFromOld : "auto";
      this.heiFromBool = !this.heiFromBool;
    },
    setFromHeight() {
      /*设置from高度*/
      let from = document.getElementsByTagName("form"); /**/
      this.heiFromOld = this.heiFrom =
        from[0].offsetHeight +
        from[1].offsetHeight +
        "px"; /*这个获取前俩个from的高度，去隐藏from的高度，这里需要通信？*/
      this.heiFromBool = false; /*如果使用通信，可以不操作dom*/
    },
    setSmFromHeight(index) {
      /*设置小from高度*/
      let k = "_hei_ato" + index;
      this.heiSmFromBool[k] = !this.heiSmFromBool[k]; /*改true或者false*/
    },
    stringHeiAto(index) {
      /*拼接字符串*/
      let k = "_hei_ato" + index;
      return this.heiSmFromBool[k];
    },
    setHeiSmFromBool() {
      /*动态增加数据*/
      for (let i = 0; i < this.formData.length; i++) {
        this.$set(this.heiSmFromBool, "_hei_ato" + i, false);
      }
    },
    textSmFromBool(index) {
      /*在template里面怎样拼接对象里面的字符串呢？*/
      let k = "_hei_ato" + index;
      return this.heiSmFromBool[k];
    },
    search() {
      let param = {};
      this.formdata.forEach(elem => {
        elem.input_set.forEach(item => {
          if(item.modelData instanceof Array){
            for(let i = 1; i<= item.modelData.length ; i++){
              param[item.code+i] = item.modelData[i-1];
            }
          }else{
            param[item.code] = item.modelData;
          }
        });
      });
      this.$emit("do-search", param);
    },
    clear() {
      let newFormData = [];
      this.formdata.forEach((elem) => {
        elem.input_set.forEach((item) => {
          if(item.type == 'daterange' || item.code == 'nl'){
            item.modelData = ['',''];
          }else{
            item.modelData = '';
          }
        });
        newFormData.push(elem);
      });
      // console.log(this.formdata,newFormData);
      this.formdata = [];
      newFormData.forEach((elem) => {
        this.formdata.push(elem);
      });
      this.search();
    },
    // 年龄范围
    changeAge1(val){
      this.ageRange2 = [];
      if(val){
        for(let i = val;i<=110;i++){
          this.ageRange2.push(i);
        }
        return;
      }
      for(let i = 1;i<=110;i++){
        this.ageRange2.push(i);
      }
    },
    changeAge2(val){
      this.ageRange1 = [];
      if(val){
        for(let i = 1;i<= val ;i++){
          this.ageRange1.push(i);
        }
        return;
      }
      for(let i = 1;i<=110;i++){
        this.ageRange1.push(i);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.margain-form {
  width: 90%;
  margin: -10px 0px 0px 1px;
  display: inline-block;
  vertical-align: top;
  color: black;
}

.hei_from {
  overflow: hidden;
}
.s-more {
  width: 100%;
  text-align: center;
  position: relative;
  top: -1px;
}
.s-more .sm-wrap {
  display: inline-block;
  cursor: pointer;
  margin-top: 0px;
  height: 28px;
  line-height: 28px;
  padding: 0 40px 0 40px;
  border-width: 1px;
  border-style: solid;
  border-color: #eee #eee #eee;
  background: rgb(238, 238, 238);
  cursor: pointer;
  color: #333;
  border-top: unset;
  font-size: 12px;
  color: rgba(14, 14, 14, 0.58);
}
.item_title {
  display: inline-block;
  color: rgba(95, 84, 84, 0.49);
  vertical-align: sub;
  margin-right: 10px;
}
.forms {
  width: 98%;
  padding: 25px 1% 0 1%;
  border-bottom: solid 1px #fff;
  height: 42px;
  overflow: hidden;
  position: relative;
  background: rgb(238, 238, 238);
  .forms_item {
    margin-bottom: 10px;
    vertical-align: sub;
  }
}
.more {
  position: absolute;
  cursor: pointer;
  top: 25px;
  right: 0;
  font-size: 14px;
  padding-right: 5px;
}
.forms.hei_ato {
  height: auto !important;
}
.button {
  width: 230px;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}
.el-date-editor,
.el-input,
.el-select {
  // width: 160px !important;
}
.el-form--inline .el-form-item__label {
  float: left !important;
  /*font-size: 20px !important;*/
}
</style>
